<template>
	<div id="divbox">
		<!-- 【此图像是圆圈头像logo】 -->
		<img src="https://ts1.cn.mm.bing.net/th/id/R-C.3aeeb6d5725738095a7ad521d46ce428?rik=prLV4puYz%2btYuw&riu=http%3a%2f%2fwww.gx8899.com%2fuploads%2fallimg%2f2018021008%2fjrmgrhcgro0.jpg&ehk=Im%2fy1GA0xuqdwYNnKtzfue2b09jzjym4jjUXy7e0Seo%3d&risl=&pid=ImgRaw&r=0"
			alt="Your Image">
		<div class="login-form">
			<div id="logo">
				<span style="font-family: 'Microsoft YaHei';letter-spacing: 0.5px; font-weight: bold; font-size: 40px;">
					&nbsp; 欢迎注册🐒<span style="color:rgb(137, 204, 255) ;">平台系统</span>
				</span>
			</div>
			<el-form ref="form" :rules="rules" :model="form" label-width="80px">
				<el-form-item label="用户名" prop="account">
					<el-input v-model="form.account" class="input"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="form.password" class="input" show-password></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="password1">
					<el-input type="password" v-model="form.password1" class="input" show-password></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="RegAccount('form')" style="width: 300px;">注册</el-button>
					<br />
					<span style="color: #006A5A;" @click="login()">已有账号？点击返回</span>
				</el-form-item>
			</el-form>
		</div>


	</div>
</template>

<script>
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.form.password1 !== '') {
						this.$refs.form.validateField('password1');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.form.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				form: {
					account: '',
					password: '',
					password1: '',
					mark:"reg"
				},
				rules: {
					account: [{
							required: true,
							message: '请输入注册的管理员账户！',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入账户密码！',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}, {
							validator: validatePass,
							trigger: 'blur'
						}
					],
					password1: [{
							required: true,
							message: '请再次确认账户密码！',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}, {
							validator: validatePass2,
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			login() {
				// alert("登录页面");
				this.$router.push('/');
			},
			RegAccount(reffrom) { //【注册】
				//数据向后端发送进行验证
				//$refs是一个引用

				this.$refs[reffrom].validate((valid) => {
					if (valid) {
						//如果发送成功，跳转到其他组件
						//【跳转语句】

						this.$http.get("reg?account=" + this.form.account + "&mark=checkAccount").then((resp) => {
							//console.log(resp.data.code);
							if (resp.data.code == 200) {//存入数据库
								this.$http.post("reg",jsonToString(this.form)).then((resp)=>{
									if(resp.data.code == 200){
										this.$message({
											showClose: true,
											message: '恭喜你，账户已注册✔',
											type: 'success'
										});
										this.$router.push("/?account="+this.form.account);
									}else if(resp.data.code == 500){
										this.$message({showClose: true,message: '系统忙，维修人员正在抢修！',type: 'warning'});
									}
								})
								
							} else if (resp.data.code == 201) {
								this.$message({
									showClose: true,
									message: '注册的账户已存在✖',
									type: 'error'
								});
								this.form.account='';
							}else{
								this.$message({showClose: true,message: '系统忙，维修人员正在抢修！',type: 'warning'});
							}
						})
						/* 
						this.$message({showClose: true,message: '系统忙，维修人员正在抢修！',type: 'warning'}); */
					}
				});
			}
		}
	}

//将json对象序列化为键=值&键=值
	function jsonToString(jsonObj) {
		//console.log(jsonObj);
		var str = "";
		for (var s in jsonObj) {
			str += s + "=" + jsonObj[s] + "&";
		}
		return str.substring(0, str.length - 1);
	}
	
</script>

<style scoped>
	#divbox {
		width: 100%;
		height: 100vh;
		/*将🎀页面背景  图片路径替换为你自己的图片路径*/
		background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.b923d0630782b4e46dcbb2121b22bdbf?rik=l7wVr9wcUyyTzw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f68%2f768.jpg&ehk=anhoZ%2fxmeecIhRHc2n9reoQbtJ2xXrvIEx0sJbLLMiI%3d&risl=&pid=ImgRaw&r=0");
		/*保持图片比例并完全覆盖元素*/
		background-size: cover;
		background-position: center center;
		/*将图片居中对齐*/
	}

	.login-form {
		width: 442px;
		height: 400px;
		background-color: rgba(248, 242, 235, 0.5);
		;
		position: relative;
		left: 455px;
		top: 170px;


	}

	#logo {
		width: 100%;
		height: 60px;
		/* background-color: aquamarine; */
		margin-bottom: 30px;
	}

	.input {
		max-width: 300px;
	}

	img {
		border-radius: 50%;
		width: 100px;
		position: absolute;
		left: 638px;
		top: 50px;
	}
</style>